<template>
  <div class="lbt">
    <!-- <div class="bgimg" :style="{height:lbtbgheight}">
    </div> -->
    <div
      class="lbtbox"
      :style="{height:lbtheight}"
      v-on:touchstart="balaanxia($event)"
      v-on:touchmove="balahuadong($event)"
      v-on:touchend="balaqilai($event)">
      <ul
        class="lbtimg"
        :style="{transform:'translateX(-'+yidong+'px)',transition:yidongdonghua}"
        v-on:transitionend="jieshu">
        <li v-for="item in lbtarr" :key="item.id">
          <img :src="item.img" :alt="item.name" />
        </li>
      </ul>
      <ol class="lbtdown">
        <li
          v-for="item in down"
          :key="item.id"
          :class="{'downactive':downnum==item.id}"
          @touchstart="dianji(item.id)"
        ></li>
      </ol>
    </div>
  </div>
</template>
<script>
import { lbtarr,down } from "@/other/lbt.js";
export default {
  name: "lbt",
  data() {
    return {
      lbtarr,
      down,
      tim: null,
      num: 0,
      downnum: 0,
      yidong: 0,
      yidongdonghua: "all 0.15s linear",
      lbtimgwidth: 0,
      huadonggaibian: 0,
      changecli: 0,
      jl: null,
      huadong: 0,
      bala: false
    };
  },
  mounted() {
    this.lbtimgwidth =
      Math.floor((document.documentElement.clientWidth + 0.33) * 84.999) / 100;
    this.lbtimgwidth =
      (this.lbtimgwidth * 100 + Math.floor(this.lbtimgwidth * 8.823)) / 100;
    this.huadonggaibian = this.lbtimgwidth * 0.3;
    this.autoplay();
  },
  destroyed() {
    // console.log("销毁轮播图那个页面的组件");
    this.stopplay();
  },
  computed: {
    lbtheight() {
      let height = document.documentElement.clientWidth * 0.85 * 0.53935;
      return height + "px";
    },
    lbtbgheight() {
      let height = document.documentElement.clientWidth * 0.85 * 0.8;
      return height + "px";
    }
  },
  methods: {
    nextimg(index) {
      this.yidong = index * this.lbtimgwidth;
      this.yidongdonghua = "all 0.15s linear";
    },
    jieshu() {
      if (this.num >= 4) {
        this.yidong = 0;
        this.num = 0;
        this.yidongdonghua = "";
      }
    },
    dianji(index) {
      this.num = index;
      this.downnum = index;
      this.nextimg(index);
      this.stopplay();
      this.jieliu();
    },
    autoplay() {
      let that = this;
      this.tim = setInterval(() => {
        if (that.downnum >= 3) {
          that.downnum = 0;
        } else {
          that.downnum += 1;
        }
        that.num += 1;
        that.nextimg(that.num);
      }, 2000);
    },
    stopplay() {
      clearInterval(this.tim);
      this.tim = null;
    },
    balaanxia(event) {
      this.huadong = event.touches[0].clientX;
    },
    balahuadong(event) {
      this.bala = true;
      this.stopplay();
      this.changecli = event.changedTouches[0].clientX - this.huadong;
      let zuo = this.num * this.lbtimgwidth - this.changecli;
      if (this.num == 3 && this.changecli <= 0) {
        this.yidong = this.num * this.lbtimgwidth;
      } else {
        this.yidong = zuo;
      }
    },
    balaqilai(event) {
      if (this.bala == true) {
        if (this.changecli >= this.huadonggaibian) {
          if (this.num == 0) {
            this.downnum = 0;
            this.dianji(this.num);
            return;
          }
          this.num -= 1;
          this.downnum -= 1;
          this.dianji(this.num);
        } else if (this.changecli <= -this.huadonggaibian) {
          if (this.num == 3) {
            this.downnum = 3;
            this.yidong = this.num * this.lbtimgwidth;
            this.dianji(this.num);
            return;
          }
          this.num += 1;
          this.downnum += 1;
          this.dianji(this.num);
        } else {
          this.yidong = this.num * this.lbtimgwidth;
          this.jieliu();
        }
        this.bala = false;
      }
    },
    jieliu() {
      let that = this;
      clearTimeout(that.jl);
      this.jl = setTimeout(() => {
        that.autoplay();
        clearTimeout(that.jl);
      }, 1500);
    }
  }
};
</script>
<style lang="less" scoped>
@import '../other/all.less';
ul,li,ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lbtbox {
  z-index: 3;
  width: 84.999%;
  margin: 0 auto;
  position: relative;
  margin-top: 80px;
}
.lbtimg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 544.12%;
  display: flex;
  font-size: 0px;
  margin-left: 0px;
  li {
    width: 100%;
    margin-right: 1.622%;
    border-radius: 8px;
    overflow: hidden;
    // box-shadow: 1px 1px 12px 2px #ccc;
    img {
      width: 100%;
    }
  }
}
.bgimg {
  width: 100%;
  position: absolute;
  top: -30px;
  left: 0px;
  overflow: hidden;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}
.bgimgbox {
  width: 140%;
  height: 100%;
  position: relative;
  li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: -75px;
    span{
        position: relative;    
        display: block;
        div{
            width: 100%;
            opacity: 0.8;
            height: 100%;
            position: absolute;
            left:0px;
            top:0px;
            z-index: 2;
        }
    }
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.lbtdown {
  z-index: 5;
  position: absolute;
  top: 95%;
  left: 50%;
  transform: translate(-50%, -150%);
  display: flex;
  li {
    width: 0.2rem;
    height: 0.2rem;
    background-color: @allcolor3;
    border-radius: 50%;
    margin: 0px 0.3rem;
  }
}
.downactive {
  transform: scale(1.5);
  background-color: @allcolor2 !important;
}
</style>